<template>
	<view>
		<view class="nav p-l-30 p-r-30 p-b-20 p-t-20">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#4cd964"></uni-segmented-control>
		</view>

		<uniSwipeAcion>
			<uni-transition mode-class="fade" :show="true" v-for="(item,index) in list" :key="index">
				<view class="list bs-b br-12" >
					<uniSwipeAcionItem>
						<view class="title">
							<uni-tag :text="item.type" type="primary" />
							<text class="f-25" style="color: red;">￥{{item.price}}</text>
						</view>
						<view class="main">
							<view class="desc"><text>创建时间:</text><text>{{item.create_time}}</text></view>
							<view class="desc"><text>使用时间:</text><text>{{item.use_time}}</text></view>
							<view class="images" v-if="item.images.length>0">
								<view class="tit">图片</view>
								<htzImageUpload class='images' :add='false' :value="item.images" :remove='false'></htzImageUpload>
							</view>
							<textShrink  :text="'备注：'+item.detail" />
							
							<view v-if="current!==0" style="background-color: #f5f5f5;" class="br-12 m-t-10 m-t-5">
								<view class="images" v-if="item.ac_images.length>0">
									<view class="f-22 p-l-10">打款凭证</view>
									<htzImageUpload class='images' :add='false' :value="item.ac_images" :remove='false'></htzImageUpload>
								</view>
								<view class="desc p-t-15 p-b-15 p-l-10 p-r-20" v-if="item.ac_detail"><textShrink :size='22' :text="'审核备注：'+item.ac_detail" /></view>
							</view>
						</view>
						<view class="bgc-white p-b-20 p-r-20" v-if="current===0">
							<view class="flex flex-fe">
								<view class="w-100 lh-60 m-l-20 tac br-12 bgc-blue" @click="openModel(index,'bx')">报销
								</view>
								<view class="w-100 lh-60 m-l-20 tac br-12 bgc-red" @click="openModel(index,'bh')">驳回
								</view>
							</view>
						</view>
						
					</uniSwipeAcionItem>
				</view>
			</uni-transition>
		</uniSwipeAcion>


		<!-- 缺省 -->
		<pinapp-empty-page v-if="list.length==0"></pinapp-empty-page>

		<block v-if="list.length!=0">
			<view class="p-b-100">
				<uni-load-more :status="status"></uni-load-more>
			</view>
		</block>

		<!-- 驳回弹窗 -->
		<view v-if="list.length>0">
			<uni-popup ref="popup1" type="bottom">
				<uni-popup-dialog style='width: 85vw;' type="info" message="成功消息" title='报销' :duration="2000"
					:before-close="true" @close="$refs.popup1.close()" @confirm="confirm('bx')">
					<view class='w-100p'>
						<view class=" m-b-5 f-22">打款凭证</view>
						<view class="m-b-10 m-t-10" style="margin-left: -8upx;margin-right: -8upx;">
							<htzImageUpload :headers="{
								Authorization:token
							}" :uploadSuccess="zidingyiSuccess" :max='9' @imgDelete='imagesDelete' :action='$http.config.baseURL+"/upload"'
								:value="list[itemIndex].ac_images"></htzImageUpload>
						</view>

						<uni-easyinput type="textarea" v-model="list[itemIndex].ac_detail" class='h-180 '
							placeholder="审核备注"></uni-easyinput>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>


		<!-- 通过弹窗 -->
		<view  v-if="list.length>0">
			<uni-popup ref="popup2" type="bottom">
				<uni-popup-dialog style='width: 85vw;' message="成功消息" title='是否驳回' :duration="2000" :before-close="true"
					@close="$refs.popup2.close()" @confirm="confirm('bh')">
					   <view class='w-100p'>
					   	<uni-easyinput type="textarea" v-model="list[itemIndex].ac_detail" class='h-180 '
					   		placeholder="审核备注"></uni-easyinput>
					   </view>
					</uni-popup-dialog>
			</uni-popup>
		</view>
		

	</view>
</template>

<script>
	import textShrink from '@/components/saber-textShrink/textShrink.vue'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import pinappEmptyPage from "@/components/pinapp-empty-page/pinapp-empty-page.vue"
	import uniSwipeAcion from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action'
	import uniSwipeAcionItem from '@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item'
	export default {
		components: {
			textShrink,
			htzImageUpload,
			pinappEmptyPage,
			uniSwipeAcion,
			uniSwipeAcionItem
		},
		data() {
			return {
				token: uni.getStorageSync('token'),
				items: ['待审核', '已报销', '已驳回'],
				current: 0,
				params: {
					page: 1,
					limit: 10
				},

				list: [],
				total: 0,
				status: 'more',
				itemIndex: 0
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			confirm(type) {
				this.$http.post('/admin/audit_operate', Object.assign({
					id: this.list[this.itemIndex].ac_id
				}, {
					ac_detail: this.list[this.itemIndex].ac_detail
				}, {
					ac_images: this.list[this.itemIndex].ac_images
				}, {
					type
				})).then(res => {
				 switch (type) {
						case 'bx':
				  	this.$refs.popup1.close()
							break;
						case 'bh':
							this.$refs.popup2.close()
				 		break;
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
				this.list.splice(this.itemIndex,1)
			},
			openModel(index, type) {
				this.itemIndex = index
				switch (type) {
					case 'bx':
						this.$refs.popup1.open('center')
						break;
					case 'bh':
					 this.$refs.popup2.open('center')
						break;
				}

			},
			imagesDelete(e) {

				this.list[this.itemIndex].images = e.tempFilePaths

			},

			zidingyiSuccess(e) {

				let res = JSON.parse(e.data)

				if (res.code === 200) {
				 return {
						success: true,
						url: res.data.url
					}
				} else {

					return {
						success: false,
						url: ""
					}
				}

			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.list = []
					this.params.page = 1
					this.getList()
				}
			},
			getList() {
				this.status = 'loading'
				this.$http.get('/admin/audit', {
					params: Object.assign(this.params, {
						type: this.current
					})
				}).then(res => {
					this.list = this.list.concat(res.data.list)
					this.total = res.data.total
					this.params.page++
					if (this.list.length >= res.data.total) {
						this.status = 'no-more'
					} else {
						this.status = 'more'
					}
				})

			}
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #fff;
	}

	.list {
		overflow: hidden;
		margin: 50upx 30upx;
		// box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, .1);
		padding: 0 2upx 2upx 2upx;

		.title {
			height: 70upx;
			background-color: #f8f8f8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20upx;
		}

		.main {
			background-color: white;
			padding: 25upx 25upx 20upx;

			.desc {
				line-height: 1.9;
				display: flex;
				justify-content: space-between;
			}

			.images {
				padding: 15upx 0;

				.tit {
					line-height: 2;
				}
			}
		}
	}
	
	.images /deep/ .htz-image-upload-Item{
		width: 120upx;
		height: 120upx;
	}
</style>
